<template>
	<div class="slider" ref="slider">
		<div class="process" :style="{width}"></div>
		<div class="thunk" ref="trunk" :style="{left}">
			<div class="block"></div>
			<div class="tips">
				<span>{{scale*100}}</span>
			</div>
		</div>
	</div> 
</template>
<script>
	/*
	 * min 进度条最小值
	 * max 进度条最大值
	 * v-model 对当前值进行双向绑定实时显示拖拽进度
	 * */
	export default {
		props: ['min', 'max', 'value','parentmsg'],
		data() {
			return {
				slider: null, //滚动条DOM元素
				thunk: null, //拖拽DOM元素
				per: this.value, //当前值
			}
		},
		methods:{
			updata () { // 既然created只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
				// console.log('ok_horse:',this.parentmsg)// 1
			},
		},
		//渲染到页面的时候
		mounted() {
			// console.log('horse组件加载当前类型：',this.parentmsg);
			this.slider = this.$refs.slider;
			this.thunk = this.$refs.trunk;
			var _this = this;
			this.thunk.onmousedown = function(e) {
				var width = parseInt(_this.width);
				var disX = e.clientX;
				document.onmousemove = function(e) {
					var newWidth = e.clientX - disX + width;
					var scale = newWidth / _this.slider.offsetWidth;
					_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
					_this.per = Math.max(_this.per, _this.min);
					_this.per = Math.min(_this.per, _this.max);
					_this.$emit('input', _this.per)
				}
				document.onmouseup = function() {
					document.onmousemove = document.onmouseup = null;
				}
				return false;
			};
			if(this.parentmsg == 'edit'){
				_this.per = this.$root.columnToNewLive.horseAlpha * 100;
			}
		},
		computed: {
			// 设置一个百分比，提供计算slider进度宽度和trunk的left值
			// 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width
			// trunk left = slider进度width + trunk宽度/2
			scale() {
				return(this.per - this.min) / (this.max - this.min);
			},
			width() {
				if(this.slider) {
					return this.slider.offsetWidth * this.scale + 'px';
				} else {
					return 0 + 'px'
				}
			},
			left() {
				if(this.slider) {
					return this.slider.offsetWidth * this.scale - this.thunk.offsetWidth / 2 + 'px';
				} else {
					return 0 + 'px'
				}
			}
		},
		watch: {
			'parentmsg': function () {
				this.updata()
			}
		}
	}
</script>
<style>
	.box {
		margin: 100px auto 0;
		width: 80%
	}
	
	.clear:after {
		content: '';
		display: block;
		clear: both
	}
	
	.slider {
		position: relative;
		margin: 45px 20px 10px 9px;
		width: 200px;
		height: 10px;
		background: #e4e7ed;
		border-radius: 5px;
		cursor: pointer;
		display: inline-block;
	}
	
	.slider .process {
		position: absolute;
		left: 0;
		top: 0;
		width: 112px;
		height: 10px;
		border-radius: 5px;
		background: #409eff
	}
	
	.slider .thunk {
		position: absolute;
		left: 100px;
		top: -7px;
		width: 20px;
		height: 20px
	}
	
	.slider .block {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #409eff;
		background: rgba(255, 255, 255, 1);
		transition: .2s all
	}
	
	.slider .tips {
		position: absolute;
		left: -7px;
		bottom: 30px;
		min-width: 15px;
		text-align: center;
		padding: 0 8px;
		background: #000;
		border-radius: 5px;
		height: 24px;
		line-height: 24px;
		color: #fff;
		font-size: 12px;
	}
	
	.slider .tips i {
		position: absolute;
		margin-left: -5px;
		left: 50%;
		bottom: -9px;
		font-size: 16px;
		color: #000
	}
	
	.slider .block:hover {
		transform: scale(1.1);
		opacity: .6
	}
</style>